<template>
  <div class="echartsContainer">
    <div ref="deviceEchartRef" class="showEchart"></div>
  </div>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { reactive, ref, onMounted, inject, onBeforeUnmount } from "vue";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TitleComponentOption,
  ToolboxComponent,
  ToolboxComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
  MarkLineComponent,
  MarkLineComponentOption,
  MarkPointComponent,
  MarkPointComponentOption,
} from "echarts/components";
import { BarChart, BarSeriesOption } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent,
  BarChart,
  CanvasRenderer,
]);
type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | ToolboxComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | MarkLineComponentOption
  | MarkPointComponentOption
  | BarSeriesOption
>;

const qoqStore = inject("qoqStore") as any;
const config = inject("config") as any;
const deviceEchartRef = ref<HTMLDivElement>(); //获取图表展示的dom

const state: {
  xAxisData: any[];
  current: any[];
  last: any[];
  charts: any[];
} = reactive({
  xAxisData: [], //轴数据
  current: [], //当日数据
  last: [], //今日数据
  charts: [],
});

//初始化图表
const init = () => {
  const paramsChart = config.layout.isDark
    ? echarts.init(deviceEchartRef.value as HTMLDivElement, "dark")
    : echarts.init(deviceEchartRef.value as HTMLDivElement);
  let options = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["当日用电", "上日用电"],
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        // magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        data: state.xAxisData,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "当日用电",
        type: "bar",
        data: state.current,
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "Avg" }],
        },
      },
      {
        name: "上日用电",
        type: "bar",
        data: state.last,
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "Avg" }],
        },
      },
    ],
  };
  paramsChart.setOption(options);
  state.charts.push(paramsChart);
};

//遍历x轴数据
const getxAxisData = (data: any) => {
  let len = data.length;
  let xAxisData: any = [];
  let current: any = [];
  let last: any = [];
  for (let i = 0; i < len; i++) {
    xAxisData.push(data[i].electricName);
    current.push(data[i].num);
    last.push(data[i].lastnum);
  }
  state.xAxisData = xAxisData;
  state.current = current;
  state.last = last;
  init();
};

//获取环比数据
const getData = () => {
  qoqStore
    .getList({ siteids: qoqStore.siteids + "", date: qoqStore.date })
    .then((res: any) => {
      getxAxisData(res.rows);
    })
    .catch((err: any) => {});
};

//释放state中图表并删除
const dShift = () => {
  return new Promise((resolve, reject) => {
    for (const key in state.charts) {
      state.charts[key].dispose();
    }
    resolve("");
  });
};

onMounted(() => {
  getData(); //获取环比数据
});

onBeforeUnmount(() => {
  dShift(); //释放state中图表并删除
});
</script>
<style lang="scss" scoped>
.echartsContainer {
  width: 100%;
  height: 65vh;
  margin: 0 auto;
  .showEchart {
    margin: 0 auto;
    width: 95%;
    height: 95%;
  }
}
</style>
